import './css/index.css';
let left = document.querySelector('.smallBox');
let right = document.querySelector('.bigBox');
let mask = document.querySelector('.mask');
let box = document.querySelector('.box');

left.addEventListener('mouseover', () => {
  mask.style.display = 'block';
  right.style.display = 'block';
});

left.addEventListener('mouseleave', () => {
  mask.style.display = 'none';
  right.style.display = 'none';
});

left.addEventListener('mousemove', moveFn);

function moveFn(e) {
  // console.log("e.pageX", e.pageX);
  // console.log("e.pageY", e.pageY);
  let moveX = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
  let moveY = e.pageY - mask.offsetHeight / 2;
  let maskMaxX = left.offsetWidth - mask.clientWidth - left.clientTop;
  let maskMaxY = left.offsetHeight - mask.clientHeight - left.clientTop;
  mask.style.left = moveX + 'px';
  mask.style.top = moveY + 'px';

  moveX <= 0 && (moveX = 0);
  moveX >= maskMaxX && (moveX = maskMaxX);
  moveY <= 0 && (moveY = 0);
  moveY >= maskMaxY && (moveY = maskMaxY);

  mask.style.left = `${moveX}px`;
  mask.style.top = `${moveY}px`;

  let bigImg = document.querySelector('.bigBox>img');
  let bigBox = document.querySelector('.bigBox');
  let bigImgMoveX =
    ((bigImg.offsetWidth - bigBox.offsetWidth) / maskMaxX) * moveX;
  let bigImgMoveY =
    ((bigImg.offsetHeight - bigBox.offsetHeight) / maskMaxY) * moveY;
  bigImg.style.transform = `translate(-${bigImgMoveX}px, -${bigImgMoveY}px)`;
}

// 下标
let selectImg = document.querySelector('.selectImg');
let lis = document.querySelectorAll('.selectImg>li');
let lastIndex = 0;

selectImg.addEventListener('click', clickFn);

function clickFn(e) {
  lis[lastIndex].children[0].classList.remove('active');
  e.target.classList.add('active');
  lastIndex = e.target.dataset.index;
  left.children[1].src = e.target.src;
  right.children[0].src = e.target.src;
}
